import React, { useEffect, useState } from 'react'
import Broadcast from '../../components/icons'
import styles from './index.module.scss'
import { videoVolume, videoRefs } from '../../store'
import { useRecoilValue } from 'recoil'
import cls from 'classnames'

let isSlideMove = false //滑块是否开始移动

const Index = () => {
  const [isShow, setIsShow] = useState(false)
  const volume = useRecoilValue(videoVolume)
  const { videoRef } = useRecoilValue(videoRefs)
  //获取滑块高度
  const getSlideRectAndEl = () => {
    const slideEm = document.querySelector('#slideContainer')
    const rectEl = slideEm.getBoundingClientRect()
    return {
      top: rectEl.top,
      height: rectEl.height,
      width: rectEl.width,
      bottom: rectEl.bottom,
      left: rectEl.left,
      right: rectEl.right,
      slideEm
    }
  }

  // 点击修改音量
  const changeVolume = e => {
    e.stopPropagation()
    const { height, top } = getSlideRectAndEl()
    const slideOffsetValue = height - e.clientY + top
    let data = slideOffsetValue
    if (data >= 95) {
      data = 100
    }
    if (data <= 5) {
      data = 0
    }
    data = data / 90
    if (data > 1) {
      data = 1
    }
    if (data < 0) {
      data = 0
    }
    videoRef.volume = data
  }
  // 静音切换,已有音量则设置为0，未有音量则设置为0.6
  const toggleVolume = e => {
    e.stopPropagation()
    if (!videoRef.volume) {
      videoRef.volume = 0.6
    } else {
      videoRef.volume = 0
    }
  }

  // 移动滑块改变音量
  const moveSlideChangeVolume = e => {
    e.stopPropagation()
    if (!isSlideMove) {
      return
    }
    changeVolume(e)
  }

  // 标记开始滑动
  const moveStart = e => {
    e.stopPropagation()
    isSlideMove = true
  }

  // 清除开始滑动
  useEffect(() => {
    const mouseUp = () => (isSlideMove = false)
    window.addEventListener('mouseup', mouseUp)
    return () => {
      window.removeEventListener('mouseup', mouseUp)
    }
  }, [])

  const mouseLeaveHide = () => {
    if (isSlideMove) {
      return
    }
    setIsShow(false)
  }
  return (
    <div
      className={cls(styles['multifunction-volume'], 'hideWhenPhone')}
      onMouseEnter={() => setIsShow(true)}
      onMouseLeave={mouseLeaveHide}
    >
      <div className={styles.toggleVolume} onClick={toggleVolume}>
        <Broadcast iconClass={!volume ? 'mute' : 'volume'} />
      </div>
      <div className={styles['volume-box']} style={{ display: isShow ? 'block' : 'none' }}>
        {/* 头部音量显示 */}
        <p className={styles['current-volume']}>{volume}</p>
        {/* 音量轨道拖动 */}
        <div className={styles['volume-slider']}>
          <div
            id="slideContainer"
            className={styles['volume-slider-mirror']}
            onClick={changeVolume}
            onMouseMove={moveSlideChangeVolume}
          />
          <div className={styles['volume-slider-op']} onClick={changeVolume} style={{ height: `${volume}%` }}>
            <span onMouseDown={moveStart} className={styles['volume-slider-op-circle']}></span>
          </div>
        </div>
      </div>
    </div>
  )
}
export default Index
